<template>
	<view class="container">
		<view class="top">
			<view class="swiper">
				<view class="swiper-item" @click="tabChange(0)" :class="[tab == 0 ? 'border' : '']">团队</view>
				<view class="swiper-item" @click="tabChange(1)" :class="[tab == 1 ? 'border' : '']">公社</view>
				<view class="swiper-item" @click="tabChange(2)" :class="[tab == 2 ? 'border' : '']">学习</view>
				<view class="swiper-item" @click="tabChange(3)" :class="[tab == 3 ? 'border' : '']">活动</view>
			</view>
			<view class="orange u-flex u-row-center">
				<HMfilterDropdown :menuTop="80"  :filterData="filterData" :defaultSelected ="defaultSelected" :tab="tab" :updateMenuName="true" @confirm="confirm" dataFormat="Object"></HMfilterDropdown>
			</view>
		</view>
		<scroll-view class="msg-list" :style="{ height: contentHeight+ 'px' }"  scroll-y="true" refresher-enabled="true" :refresher-triggered="triggered"
            :refresher-threshold="100" @refresherpulling="onPulling"
            @refresherrefresh="onRefresh" @refresherrestore="onRestore" @refresherabort="onAbort">
			
				<view class="u-flex u-row-center u-m-50" v-if="list[tab] == undefined" style="flex-direction: column;">
					<image style="width:300rpx;height:300rpx;" mode="widthFix" src="../../static/img/nodata.png"></image>
					<text style="color:#ccc">暂无结果</text>
				</view>
		<view class="list u-border-bottom" v-for="(item,index) in list[tab]" :key="index">
			<view class="u-flex u-row-between">
				<view class="u-flex u-row-start u-col-center u-p-20">
					<view class="mytupian"  @click="detailCompany(item.id)" :style="{ backgroundImage: 'url('+ (item.icon != undefined ? baseUrl+item.icon : defaultLogo ) + ')' }">
						<image :src="logoMask"></image>
					</view>

					<view style="flex:1;">
						<view class="u-p-b-20">
							<view>{{item.name}}</view>
							<view class="u-light-color u-m-t-10" v-if="tab > 0 && item.demand != undefined && item.demand.jdsm">{{item.demand.jdsm}}</view>
						</view>
						<view class="chengyuan">
							<image src="../../static/img/chengyuant.png"></image>
							{{item.num}}成员
						</view>
					</view>
					<view>{{item.remark}}</view>
				</view>
				<view class="u-m-r-30">
					<view class="button" @click="joinTeam(item)" size="mini">加入</view>
				</view>

			</view>

		</view>
		<u-loadmore class="u-m-30" v-if="list[tab] != undefined" :status="loadStatus"  :icon-type="iconType" :load-text="loadText"  bgColor="#fff"></u-loadmore>
		</scroll-view>


	</view>
</template>

<script>
import HMfilterDropdown from '@/components/HM-filterDropdown/HM-filterDropdown.vue';
	import data from '@/common/data.js';//筛选菜单数据
	export default {
		components: {
			'HMfilterDropdown':HMfilterDropdown
		},
		data() {
			return {
				triggered: false,
				isHistoryLoading: false,
				scrollAnimation: false,
				scrollTop: 0,
				scrollToView: '',
				baseUrl: this.$mConfig.baseUrl,
				logoMask: this.$mAssetsPath.logoMask,
				defaultLogo: this.$mAssetsPath.defaultLogo,
				indexArr:'',
				valueArr:'',
				tab: 0,
				navScrollLeft: 'right',
				reqBody: {
					type: 0, //0 团队 1公社 2 学习 3活动
					size: 10,
					index: 1
				},
				list: [
					[{"icon":"/j_upload/2020-11-20/63cbe17edb9846358250c19e53537f35.jpeg","name":"大团","id":6,"num":"1"},{"icon":"/j_upload/2020-11-20/63cbe17edb9846358250c19e53537f35.jpeg","name":"12","id":3,"num":"2"},{"icon":"/j_upload/2020-11-20/63cbe17edb9846358250c19e53537f35.jpeg","name":"小明团队","id":2,"num":"2"}]
				],				
				defaultSelected:[],
				filterData:[
					{
						name:'全国',
						"type": 'hierarchy',
						"submenu": [],
					},
					{
						 "name":'类型',
						"type": 'filter',
						"submenu": [
							{
								"name": "类型",
								"value": "类型",
								"submenu": [{
										"name": "招标代理",
										"value": "招标代理"
									},
									{
										"name": "房地产开发",
										"value": "房地产开发"
									},
									{
										"name": "工程勘察",
										"value": "工程勘察"
									},
									{
										"name": "工程设计",
										"value": "工程设计"
									},
									{
										"name": "工程监理",
										"value": "工程监理"
									},
									{
										"name": "工程施工管理",
										"value": "工程施工管理"
									},
									{
										"name": "园林景观",
										"value": "园林景观"
									},
									{
										"name": "建筑材料",
										"value": "建筑材料"
									},
									{
										"name": "装饰装修",
										"value": "装饰装修"
									},
									{
										"name": "机械配套",
										"value": "机械配套"
									},
									{
										"name": "物流仓储",
										"value": "物流仓储"
									},
									{
										"name": "劳务",
										"value": "劳务"
									},
									{
										"name": "工业设计",
										"value": "工业设计"
									},
									{
										"name": "教育培训",
										"value": "教育培训"
									},
									{
										"name": "法律服务",
										"value": "法律服务"
									},
									{
										"name": "金融保险",
										"value": "金融保险"
									}
								]
							}
						]
					}
				],				
				loadStatus: 'loadmore',
				iconType: 'flower',
				loadText: {
					loadmore: '轻轻上拉',
					loading: '努力加载中',
					nomore: '实在没有了'
				},
				contentHeight:0
			}
		},			
		filters: {
		　　outData(value) {
		　　　　return JSON.stringify(value);
		　　}
		},
		mounted() {
			let token = uni.getStorageSync('token');
			var that = this;
			
			uni.getSystemInfo({
				success: function(res) {
					that.scrollHeight = res.windowHeight;	
				}
			});
								
			let view = uni.createSelectorQuery().in(this).select(".top");
			view.boundingClientRect(data => {
				that.contentHeight = that.scrollHeight - data.top;
			}).exec();
			
			//this.getFilterData();
		},
		onNavigationBarButtonTap: function(val) {
			console.log(val)
		},
		onNavigationBarSearchInputChanged: function(val) {
			console.log(val)
			this.search(val);
		},   
		onPullDownRefresh: function() {
			this.reqBody.index = 1;
			this.initPage();
			setTimeout(() => {
				uni.stopPullDownRefresh();
			}, 1200);
		},		
		onLoad: function () {
			this._freshing = false;
			setTimeout(() => {
				this.triggered = true;
			}, 1000)
			this.initPage();
			//定时器模拟ajax异步请求数据
			//this.filterData = data; 				
			this.getFilterData();
			
		},
		methods: {	
			detailCompany(e){
				if(this.tab == 0){
					this.$mRouter.push({
						route:this.$mRoutesConfig.teamPage,
						query:{
							id:e
						}
					});
				}
			},
			async getFilterData(){
				let result = await this.$apis.fetchArea({level:2});
				let filterData = this.filterData;
				let data = [{
							"name": '全国',
							"value": "全国",
							"submenu": [
								{"name": "全国","value": "全国"}
							]
						}];
					
				filterData[0].submenu = data.concat(result.data);
				this.filterData = filterData;
				console.log(this.filterData);
			},
			onPulling(e) {
				console.log("onpulling", e);		
				this.loadStatus = "loading";
				this.initPage();
				setTimeout(() => {
					this.loadStatus = "loadmore";
				}, 500);
			},
			onRefresh() {
				if (this._freshing) return;
				this._freshing = true;
				
				setTimeout(() => {
					this.triggered = false;
					this._freshing = false;
				}, 500)
			},
			onRestore() {
				this.triggered = 'restore'; // 需要重置
				console.log("onRestore");
			},
			onAbort() {
				console.log("onAbort");
			},
			
			async search(val){
				let keyword = val.text;
				if(keyword != ''){
					this.reqBody.name = keyword;
					let result = await this.$apis.fetchGroup(this.reqBody);
					let list = [];
					list[this.tab] = result.data.content;
					this.list = list;
				}
			},
			//接收菜单结果
			async confirm(e){
				// this.indexArr = e.index;
				 console.log(e);
				// this.valueArr = e.value;	
				if(e.index == '' || e.index == undefined ){
					this.reqBody.searchType = this.filterData[1]['submenu'][0]['submenu'][e.index].value;
				}else{
					delete this.reqBody.searchType;
				}
						
				if( e.value != undefined){	
					if(e.value[0][0] == '全国'){
					  delete this.reqBody.area;
					}else{
						this.reqBody.area = e.value[0][0];
					}
					if(e.value[1][0] != undefined){
					  this.reqBody.searchType = e.value[1][0];
;					}
				}
				let result = await this.$apis.fetchGroup(this.reqBody);
					let list = [];
				list[this.tab] = result.data.content;
				this.list = list;
			},
			//修改选中项-示例
			changeSelected(){
				this.defaultSelected = [];
				this.$nextTick(()=>{
					this.defaultSelected = [
						[null,null],			
						[[0],[1,2,7],[1,0]]		
					];
				})
			},
			async initPage() {
				let result = await this.$apis.fetchGroup(this.reqBody);
				let list = [];
				if(result.data != null){					
					list[this.tab] = result.data.content;	
				}			
				this.list = list;				
			},
			tabChange(e) {
				this.tab = e;
				this.reqBody.type = e;				
				this.initPage();
			},
			async joinTeam(item){
				let result = await this.$apis.applyGroup({id:item.id,type:item.type});
				if(result.code == 200){
					uni.showToast({
						title:"申请已提交"
					})
				}else{
					uni.showToast({
						title:result.message,
						icon:'none'
					})
				}
			}
		},



	}
</script>

<style scoped lang="scss">
	page {
		background-color: #ffffff;
		overflow: hidden;
	}
	.top{height:150rpx;}
	.orange {
		height: 80rpx;
		background: #FFF2F2;
		.quanguo {
			width: 50%;
			text-align: center;
			color: #AB61FF;
		}
	}

	.chengyuan image {
		width: 31rpx;
		height: 27rpx;
		margin-right: 10rpx;
	}

	.chengyuan {

		color: #4B9CFF;
	}

	.mytupian {
		position: relative;
		width: 115rpx;
		height: 132rpx;
		margin: 8rpx 28rpx 0 8rpx;
		overflow: hidden;
		background-repeat: no-repeat;
		background-position:center 0;
		background-size: 115% auto;
		display: flex;
		image {
			width: 115rpx;
			height: 132rpx;
			position: absolute;
			left:0;
		}
	}

	.touxiang {
		text-align: center;
		width: 100rpx;
		line-height: 132rpx;
	}

	.fiexd-head {
		position: fixed;
		top: 0;
		/* #ifdef H5 */
		top: 40rpx;
		/* #endif */
		left: 0;
		z-index: -1;
		width: 100%;
		height: 40rpx;
	}

	.header {
		width: 750rpx;
		// background: linear-gradient(0deg, #ac62ff, #df62ff);
	}

	.nav {
		width: 100%;
		padding: 15rpx 0 29rpx 0;
		box-sizing: border-box;
		overflow: hidden;
		font-size: 28rpx;
		white-space: nowrap;

		.nav-item {
			width: 20%;
			display: inline-block;
			text-align: center;
			color: #fff;

			&.active {
				color: #fff;
			}
		}
	}

	.swiper {
		width: 100%;
		height: 80upx;
		display: flex;
		// background-color: #fff;
		background: linear-gradient(0deg, #ac62ff, #df62ff);
		justify-content: space-around;
		align-items: center;
		padding: 0 20upx;
		position: fixed;
		z-index:100000;
		.swiper-item {
			height: 60upx;
			padding: 0 10upx;

			color: #FFFFFF;
		}

		.border {
			border-bottom: #FFFFFF solid 4upx;
			border-radius: 2upx;

		}
	}

	.button {
		width: 132rpx;
		height: 54rpx;
		line-height: 54rpx;
		white-space: nowrap;
		text-align: center;
		background: #AB61FF;
		border-radius: 27rpx;

		color: #FFFFFF;


		&.u-hairline-border:after {
			border: 0;
		}
	}

	.sousuo {
		height: 230rpx;
		line-height: 130rpx;
		background: #AB61FF;
		position: relative;
	}

	.ssbtn {
		position: absolute;
		left: 1%;
		text-align: center;
		z-index: 1;
	}

	.form {
		width: 606rpx;
		height: 68rpx;
		background: #FFFFFF;
		// opacity: 0.3;
		border-radius: 34px;

	}

	.mytupian {

		.name {

			color: #888D99;
			font-size: 26rpx;
		}

		.nameblue {

			color: #4B9CFF;
		}
	}

	.detail {
		color: #FF9028;
		padding-top: 100rpx;
	}
</style>
